<template>
  <!--<div class="login-container">-->
  <div>
    <div class="licc-consumer-top">
      <el-form :model="filterConditions" ref="filterConditions"  label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="手机号"
              prop="selectPhone"
              :rules="[{trigger: 'blur', validator: validateSelectPhone}]">
              <el-input v-model="filterConditions.selectPhone" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=注册时间>
              <el-date-picker
                v-model="datePickerValue"
                value-format="yyyy-MM-dd HH:mm:SS"
                :picker-options="pickerOptions"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="6">
            <el-button type="info" @click="restUserInfosButton">重 置</el-button>
            <el-button type="primary" @click="selectUserInfosButton">筛 选</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table
        stripe
        border
        :data="consumers"
        :default-sort = "{prop: 'createDate', order: 'descending'}">
        <el-table-column
          type="index">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" sortable></el-table-column>
        <el-table-column prop="nickname" label="昵称" ></el-table-column>
        <el-table-column prop="createDate" label="注册时间" sortable></el-table-column>
        <el-table-column prop="age" label="生日" sortable></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          :filters="sexStatusFilters"
          :filter-method="sexStatusFilterTag">
          <template slot-scope="scope">
            <el-tag :type="sexStatusType(scope.row.sex)">
              {{sexShowText(scope.row.sex)}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="disabled" label="可登录">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.disabled"
              @change="userSwitchChange(scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 35, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goodsTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import userApi from '@/api/backstage/user'

  export default {
    name: 'Goods_listInfo',
    data() {
      return {
        consumers:[],
        sexStatusFilters:[
          { text:'保密', value:0, type:'info'},
          { text:'男', value:1, type:'info'},
          { text:'女', value:2, type:'info'}
        ],
        currentPage: 1,
        pagesize:20,
        goodsTotal:0,
        /** 筛选条件 **/
        filterConditions:{},
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        /** 待匹配号码 **/
        // selectPhone: '',
        /** 日期选择器 **/
        datePickerValue:'',
        paramsInfo:{},
      }
    },
    created() {
      this.initData({})
    },
    methods:{
      initData(params){
        userApi.getAllUserInfo(params, this.currentPage, this.pagesize).then(res => {
          this.consumers = res.data.records;
          this.goodsTotal = res.data.total;
        }).catch(() => {
          this.$notify.error({title: '失败', message: "获取用户信息失败"});
        })
      },
      sexStatusFilterTag(value, row){
        /** 状态列的筛选 需要filters filter-method属性**/
        return value === row.reviewStatus;
      },
      sexShowText(value){
        /** 拿到该行的值，然后遍历reviewStatusFilters拿到对应标签的名称 **/
        for (let i = 0; i < this.sexStatusFilters.length; i++){
          if (value === this.sexStatusFilters[i].value){
            return this.sexStatusFilters[i].text;
          }
        }
        return value;
      },
      sexStatusType(value){
        /** 拿到该行的值，然后遍历reviewStatusFilters拿到对应标签的样式 **/
        for (let i = 0; i < this.sexStatusFilters.length; i++){
          if (value === this.sexStatusFilters[i].value){
            return this.sexStatusFilters[i].type;
          }
        }
        return "";
      },
      userSwitchChange(row){
        /** 禁用或启用用户信息 **/
        let content = (row.disabled === 1)?'该操作将会解封“'+row.phone+'”账号，是否继续？':'该操作将会冻结“'+row.phone+'”账号，是否继续？';
        this.$confirm(content, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id:row.id,
            disabled:row.disabled
          }
          userApi.updateUserInfo(params).then(res => {
            this.$notify({title: '成功', message: "修改账号状态成功", type: 'success'});
          }).catch(() => {
            this.$notify.error({title: '失败', message: "账号状态修改失败"});
          })
        }).catch(() => {
          /** 取消提交 **/
          row.disabled = (row.disabled === 1)?0:1;
          this.$notify.info({title: '取消', message: '已取消提交操作'});
        });
      },
      /** 分页---开始 **/
      handleSizeChange(val) {
        this.pagesize = val;
        this.initData(this.paramsInfo);
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initData(this.paramsInfo);
        console.log(`当前页: ${val}`);
      },
      /** 分页---结束 **/
      /** 搜索规则--开始 **/
      validateSelectPhone(rule, value, callback){
        const usernameRegex = /^\d{3,11}$/
        if (value === '' || typeof(value) == "undefined"){
          callback();
        }
        if (!usernameRegex.test(value)) {
          callback(new Error('手机号筛选条件为3到11位的纯数字'));
        } else {
          callback()
        }
      },
      /** 搜索规则--结束 **/
      selectUserInfosButton(){
        if((this.filterConditions.selectPhone===''||this.filterConditions.selectPhone==null||typeof(this.filterConditions.selectPhone)=="undefined")&&(this.datePickerValue===''||this.datePickerValue==null)){
          this.$notify({title: '提示', message: '请输入筛选信息', type: 'warning'});
          return false;
        }
        this.paramsInfo = {};
        this.paramsInfo = (this.filterConditions.selectPhone === '')?{}:{phone:this.filterConditions.selectPhone};
        if (this.datePickerValue !== ''&&this.datePickerValue!=null){
          this.paramsInfo.date = this.datePickerValue[0]+","+this.datePickerValue[1];
        }
        this.$refs['filterConditions'].validate(valid => {
          if (valid){
            this.initData(this.paramsInfo);
          } else {
            this.$notify({title: '提示', message: '输入的手机信息不合规', type: 'warning'});
          }
        });
      },
      /** 重置搜索--结束 **/
      restUserInfosButton(){
        this.filterConditions.selectPhone = '';
        this.datePickerValue = null;
        this.paramsInfo = {};
        this.$refs['filterConditions'].clearValidate();
        this.initData({});
      }
    }
  }
</script>
<style>
.licc-consumer-top{
  width: 100%;
  min-width: 1100px;
}
</style>
